<template>
    <a-card>
        <!-- 表头 -->
        <div class="table-header">
            <!-- 查询条件 -->
            <a-form layout="inline" class="basic-form" :form="queryForm">
                <!-- 其他查询条件 -->
                <slot name="queryFormItem" />
            </a-form>
            <!-- 表头操作按钮 -->
            <div class="operators">
                <slot name="headerOperators" />
            </div>
        </div>
        <!-- 表格内容 -->
        <div class="table-content">
            <!-- 勾选表格数据监控 -->
            <div class="table-alert" v-if="rowSelection && rowSelection.selectedRowKeys">
                <a-alert type="info" :show-icon="true">
                    <template slot="message">
                        <span>已选择&nbsp;</span>
                        <a style="font-weight: 600;">{{ rowSelection.selectedRowKeys.length }}</a>
                        <span>&nbsp;项</span>
                        <a style="margin-left: 24px;" @click="() => rowSelection.selectedRowKeys.splice(0,rowSelection.selectedRowKeys.length)">清空</a>
                    </template>
                </a-alert>
            </div>
            <!-- 数据表格 -->
            <a-table
                size="middle"
                :dataSource = "dataList"
                :row-key = "rowKey"
                :row-selection = "rowSelection"
                :pagination = "false"
            >
                <!-- 列 -->
                <slot name="tableColumns" />
            </a-table>
        </div>
        <!-- 其他 -->
        <slot />
    </a-card>
</template>

<script>
    export default {
        props : {
            //  接口信息
            api : { type : Function, default : () => {} },
            //  每行的唯一标识,默认是Id
            rowKey : { type : Function, default : record => record.id },
            //  列表项是否可选择
            rowSelection : { type : Object, default : () => undefined },
        },
        data(){
            return {
                //  查询表单
                queryForm : this.$form.createForm(this),
                //  表格数据
                dataList : []
            };
        },
        watch: {
            // 如果路由有变化，会再次执行该方法
            '$route' : function (route) {
                //  刷新表格
                if (route.query){
                    this.handleTableQuery(route.query);
                }
            }
        },
        mounted(){
            this.handleTableQuery({});
        },
        methods : {
            /**
             * 查询表格数据
             * @param params 查询条件
             */
            handleTableQuery : function (params) {
                //  获取查询条件
                let queryParams = this.queryForm.getFieldsValue();
                const parameters = Object.assign({},params,queryParams);
                //  查询数据
                this.api(parameters).then(result => this.dataList = result.data);
            },
        }
    }
</script>

<style lang="less">
    @import "./style";
</style>
